import React, { PureComponent } from 'react';
import classNames from 'classnames'

import Icon from '@ant-design/icons';
import moment from 'moment';


import { Button, DatePicker  } from 'antd';
import { PoweroffOutlined } from '@ant-design/icons';

import HYHomeRecommend from './components/home/childCpns/home-recommend'

export default class App extends PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      loadings: true,
    }
  }
  render() {
    const { loadings } = this.state;
    const { MonthPicker, RangePicker } = DatePicker;
    return (
      <>
        <HYHomeRecommend></HYHomeRecommend>

        <Button type="primary" loading>
          Loading
        </Button>
        <Button type="primary" size="small" loading>
          Loading
        </Button>
        <Button type="primary" icon={<PoweroffOutlined />} loading />
        <br />
        <Button type="primary" loading={loadings[0]} onClick={() => this.enterLoading(0)}>
          Click me!
        </Button>
        <Button
          type="primary"
          icon={<PoweroffOutlined />}
          loading={loadings[1]}
          onClick={() => this.enterLoading(1)}
        >
          Click me!
        </Button>
        <Button
          type="primary"
          icon={<PoweroffOutlined />}
          loading={loadings[2]}
          onClick={() => this.enterLoading(2)}
        />


        <RangePicker
          defaultValue={[moment('2019-09-03', 'YYYY-MM-DD'), moment('2019-11-22', 'YYYY-MM-DD')]}
        />
      </>
    )
  }
}






// export default class App extends PureComponent {
//   constructor(props) {
//     super(props);

//     this.state = {
//       isActive: true,
//       isBar: false,
//     }
//   }
//   render() {
//     const { isActive, isBar } = this.state;

//     return (
//       <div>
//         {/* 原生React中增加class方法 */}
//         <h2 className={"foo bar active title"}>我是标题1</h2>
//         <h2 className={"title " + (isActive ? "active" : "")}>我是标题2</h2>
//         {/* 传入数组 */}
//         <h2 className={["title", (isActive ? "active" : "")].join(" ")}>我是标题3</h2>

//         {/* classnames库增加class */}
//         <h2 className={"foo bar active title"}>我是标题4</h2>
//         <h2 className={classNames("foo", "bar", "active", "title")}>我是标题5</h2>
//         <h2 className={classNames({ "active": isActive, "bar": isBar })}>我是标题6</h2>
//         <h2 className={classNames("foo")}>我是标题7</h2>
//         <h2 className={classNames(["active","title"])}>我是标题8</h2>
//       </div>
//     )
//   }
// }
